<template>
	<view>
		<view class="search-main" :style="'background-image:url('+m.site.weiBo+')'">
			<view class="headtitle">{{m.site.seoTitle}}</view>
			<view class="cu-bar search">
				<view class="cu-avatar round" :style="'background-image:url('+m.site.siteLogo+')'"></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="search" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>
				<!-- <view class="action">
					<button class="cu-btn bg-green shadow-blur round">搜索</button>
				</view> -->
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav" style="height: 175px;">
			<view class="flex text-center">
				<view class="cu-item flex-sub">
					<view class="nav-list">
						<view class="kj-item" v-for="(item,index) in m.code" :key="index"  :data-id="index" @click="goNavUrl(item)">
							<image class="kjimg" :src="item.summary"></image>
							<view class="kjtitle">{{item.name}}</view>
						</view>
					</view>					
				</view>
			</view>
		</scroll-view>
		<!-- <swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in m.adv" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.imgUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<view class="bg-swiper">
			<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="cardSwiper">
				<swiper-item v-for="(item,index) in m.adv" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill" style="height: 220rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="news-wall">
			<view class="news-item" v-for="(it,index) in page.items" :key="index" :class="it.attrType==0?'flex':it.attrType==1?'large':'many'">
				<view class="news-title" v-if="it.attrType==0">
					<view class="title" @click="goUrl(it)"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>
					<view class="ts">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
				</view>
				<view class="news-image" v-if="it.attrType==0" @click="goUrl(it)">
					<image class="img" :src="it.img[0].image"></image>
				</view>
				<view class="news-title" v-if="it.attrType==1" @click="goUrl(it)">
					<view class="title"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>					
				</view>
				<view class="news-image" v-if="it.attrType==1" @click="goUrl(it)">
					<image class="img" :src="it.img[0].image"></image>
				</view>
				<view class="ts" v-if="it.attrType==1">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
				<view class="news-title" v-if="it.attrType==2" @click="goUrl(it)">
					<view class="title"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>					
				</view>
				<view class="news-image grid col-3" v-if="it.attrType==2" @click="goUrl(it)">
					<image class="img" v-for="(row,index) in it.img" :key="index" :src="row.image"></image>
				</view>
				<view class="ts" v-if="it.attrType==2">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
			</view>
		</view>
		<view class="no-data" v-show="pageshow">没有啦~~</view>
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data() {
			return {
				m:{},
				page:{},
				param:{
					page:1,
					attr:1,
					limit:20,
					total:1
				},
				cardCur: 0,
				isxl:false,
				pageshow:false,
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			uni.showLoading({
				title: 'loading'
			});
			this.loadData();
			// if(!this.hasLogin){
			// 	//如果没有登录，去登录
			// 	uni.navigateTo({
			// 		url: '/pages/user/login'
			// 	})
			// }
			// setTimeout(()=>{
			// 	
			// }, 1000)
		},
		onReachBottom(){
			if(this.param.page>=this.param.total){
				this.pageshow=true;
			}else{
				this.param.page+=1;
				uni.showLoading({
					title: 'loading'
				});
				this.loadArticle();
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: 'loading'
			});
			this.isxl=true;
			this.param.page=1;
			this.pageshow=false;
			this.loadData();
		},
		methods: {
			async loadData(){
				let that=this;
				this.$api.ajax('index/data',{},function(res){ 
					if(that.isxl){
						that.isxl=false;
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
					var data=res[1].data;
					if(data.statusCode==200){
						that.m=data.data;
						that.page=data.data.list;
						that.param.total=that.page.totalPages;
					}
					else{
						that.$api.msg('网络失败');
					}
				});
				
			},
			loadArticle(){
				let that=this;
				this.$api.ajax('index/article',that.param,function(res){ 
					uni.hideLoading();
					var data=res[1].data;
					if(data.statusCode==200){
						for(var i=0; i<data.data.items.length; i++){
							that.page.items.push(data.data.items[i]);
						}
					}
					else{
						that.$api.msg('网络失败');
					}
				});
			},
			goNavUrl(m){
				if(m.name!='包头爆料'){
					uni.navigateTo({
						url: '/pages/index/public'
					})
				}else{
					uni.navigateTo({
						url: '/pages/news/index',
					})
				}
				
			},
			goUrl(m){
				uni.navigateTo({
					url: '/pages/news/info?id='+m.id,
				})
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style lang='scss'>
	.bg-swiper{
		border-top: 8px solid #f1f1f1;
		margin:25px 0 15px 0;
		padding:15px  15px 0 15px;
		.screen-swiper{
			min-height: 100rpx;
			height: 220rpx;
			image{
				border-radius: 8rpx;
			}
		}
	}
	.no-data{
		text-align: center;
		padding: 15px 0;
		color: #777;
	}
	.news-wall{
		background-color: #ffffff;
		padding:15px;
		margin-top: 10px;
		border-top: 8px solid #f1f1f1;
		.news-item.many{
			.news-title{
				width:100%;
				.title{
					padding-right: 0px;
				}
			}
			.news-image{
				width:100%;
				margin-top: 10px;
			}
			.news-image .img{
				width:32.666%;
				height: 80px;
				border-radius: 3px;
			}
			.news-image .img:nth-child(2){
				margin:0 1%;
			}
			.ts{
				margin-top: 5px;
				width:100%;
				font-size: 13px;
				color: gray;
				.new-comment{
					display: inline-block;
					margin-left: 20px;						
					.cuIcon-comment{
						margin-right: 3px;
						font-size: 18px;
						vertical-align: middle;
						position: relative;
						top: -1px;
						color: rgb(250, 67, 106);
					}
				}
			}
		}
		.news-item.large{
			.news-title{
				width:100%;
				.title{
					padding-right: 0px;
				}
			}
			.ts{
				margin-top: 5px;
				width:100%;
				font-size: 13px;
				color: gray;
				.new-comment{
					display: inline-block;
					margin-left: 20px;						
					.cuIcon-comment{
						margin-right: 3px;
						font-size: 18px;
						vertical-align: middle;
						position: relative;
						top: -1px;
						color: rgb(250, 67, 106);
					}
				}
			}
			.news-image{
				width:100%;
				margin-top: 10px;
			}
			.news-image .img{
				width:100%;
				height: 160px;
				border-radius: 3px;
			}
		}
		.news-item{
			border-bottom: 1px solid #e6e7e8;
			padding: 10px 0;
			position: relative;			
			.news-title{
				width:70%;
				.title{
					padding-right: 10px;
					color: #111;
					font-size: 16px;
					line-height: 24px;
					.red{
						background-color: #fa436a;
						color: #ffffff;
						font-size: 12px;
						margin-right: 5px;
						padding:3px 10px;
						border-radius: 5px;
						vertical-align: middle;
						position: relative;
						top: -1px;
					}
				}
				.ts{
					margin-top: 15px;
					width:100%;
					font-size: 13px;
					color: gray;
					.new-comment{
						display: inline-block;
						margin-left: 20px;						
						.cuIcon-comment{
							margin-right: 3px;
							font-size: 18px;
							vertical-align: middle;
							position: relative;
							top: -1px;
							color: rgb(250, 67, 106);
						}
					}
				}
			}			
			.news-image{
				width:30%;
			}
			.news-image .img{
				width:100%;
				height: 80px;
				border-radius: 3px;
			}
		}
	}
	.search-main{
		height: 220px;
		padding:100px 0 15px 0;
		background-color:#ff6589;
		background-image:url('http://bt.img.feiyit.com//mobile/iconlss/bl-tbg.png');
		background-repeat:no-repeat;
		background-size:100% 100%;
		-moz-background-size:100% 100%;
		.headtitle{
			font-size: 20px;
			color: white;
			text-align: center;
			margin-bottom: 20px;
		}
	}
	.nav-list {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.nav .cu-item{
		line-height: inherit
	}
	.kj-item{		
		text-align: center;
		width:20%;
		padding-top:15px;
		line-height: inherit;
		.kjimg{
			width:45px; 
			height: 45px;
			line-height:inherit;
		}
		.kjtitle{
			line-height: 26px;
			font-size: 13px;
		}
	}
</style>
